<template>
	<view class="center-form">
		<u-button text="微信一键登录" openType="getPhoneNumber" :custom-style="sumbitBtnCss" shape="circle" @getphonenumber="getUserPhone"></u-button>
		<view class="radio-box">
			<u-radio-group v-model="isChange" @change="changeAgm">
				<u-radio :labelDisabled="true" shape="square" name="change" />
				同意智铺管理端
				<text @click="jumpPageAgreement(2)" style="color: #0033ff">《用户协议》</text>
				和
				<text @click="jumpPageAgreement(1)" style="color: #0033ff">《隐私政策》</text>
			</u-radio-group>
		</view>
		<view class="other-login" @click="otherLogin">
			手机验证码登录
			<u-icon name="arrow-right" size="14"></u-icon>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isChange: false, // 是否选中协议
			sumbitBtnCss: {
				// 提交按钮的样式
				background: 'linear-gradient(270deg, rgba(47, 176, 252, 0.5) 0%, #0033FF 100%)',
				opacity: '0.5',
				color: '#fff'
			}
		};
	},
	methods: {
		// 跳转到协议页  url  协议地址
		jumpPageAgreement(id) {
			uni.navigateTo({
				url: '/packMyself/agreement/agreement?id=' + id
			});
		},
		// 同意协议
		changeAgm() {
			this.sumbitBtnCss = {
				// 提交按钮的样式
				background: 'linear-gradient(270deg, rgba(47, 176, 252, 0.5) 0%, #0033FF 100%)',
				opacity: '1',
				color: '#fff'
			};
		},
		//  登录
		async getUserInfo(info) {
			if (!this.isChange) return uni.$u.toast('请先阅读并同意协议');
			this.getUserPhone();
		},
		// 获取用户的手机号临时code
		async getUserPhone(info) {
			const type = 2
			const res = await this.$api.wechat.WXAccessToken({ type});
			if (res.data && res.data.errcode === 0) {
				const params = {
					code: info.detail.code,
					accessToken: res.data.access_token,
					type
				};
				this.getPhoneInfo(params);
			} else {
				uni.$u.toast(res.data.errmsg);
			}
		},
		// 通过code 获取手机号
		async getPhoneInfo(info) {
			const res = await this.$api.wechat.WXPhone(info);
			if (res.data.errcode == 0) {
				const params = {
					type: 3,
					phone: res.data.phone_info.purePhoneNumber
				};
				this.$emit('change', params);
			}
		},

		// 其他方式登录
		otherLogin() {
			this.$emit('otherLogin', 1);
		}
	}
};
</script>

<style lang="scss" scoped>
.center-form {
	background: rgba(255, 255, 255, 0.39);
	box-shadow: 0px 0px 20px rgba(42, 122, 255, 0.2);
	border: 1px #fff solid;
	margin: 50rpx 40rpx 0;
	border-radius: 5px;
	padding: 100rpx 40rpx 60rpx;

	.u-form-item__body {
		padding: 30rpx 0;
	}
}

.radio-box {
	margin: 65rpx 0 32rpx;
	color: #999;
	font-size: 24rpx;
	display: flex;
}

.other-login {
	display: flex;
	justify-content: flex-end;
	margin-top: 100rpx;
	font-size: 24rpx;
	color: #999;
	text-align: right;
}
</style>
